<template>
  <div class="statistical">
    <div class="flex header mb16">
      <div class="flex-1 flex-align-center mr16 header_cell">
        <div class="mr16 flex-align-center">
          <svg class="icon f-30" aria-hidden="true" slot="image">
            <use xlink:href="#icon-shuliang"></use>
          </svg>
        </div>
        <div>
          <p class="mb8 ws-nowrap"><countTo class="block_white--num" :startVal='0' :endVal='total.count' :duration='2000'></countTo><span class="block_white--unit">个</span></p>
          <p class="block_white--footer">科研项目</p>
        </div>
      </div>
      <div class="flex-1 flex-align-center header_cell">
        <div class="mr16 flex-align-center">
          <svg class="icon f-28" aria-hidden="true" slot="image">
            <use xlink:href="#icon-jingfeishiyong"></use>
          </svg>
        </div>
        <div>
          <p class="mb8 ws-nowrap"><countTo class="block_white--num" :startVal='0' :endVal='total.funds' :duration='2000'></countTo><span class="block_white--unit">万元</span></p>
          <p class="block_white--footer">科研经费</p>
        </div>
      </div>
    </div>
    <div class="content flex-1 flex-ver flex-center" v-loading='contentLoading'>
      <yearrange @onChange="onChange" ref="yearrange" />
      <div ref="SCEchart" class="SCEchart"> 

      </div>

    </div>
  </div>
</template>

<script>
import {throttle} from "@/utils"
import {ApiprojectFunds} from "@/api"
import yearrange from '@/components/yearrange.vue'
import countTo from 'vue-count-to';
const echarts = require('echarts')

export default {
  components:{
    yearrange,
    countTo
  },
  data(){
    return{
      total:{
        count:0,
        funds:0,
      },
      contentLoading: false,
      options:{
        start_time: null,
        end_time: null
      }
    }
  },
  mounted(){
    this.getInfo(true)
  },
  methods:{
    getInfo(flag=false){
      this.contentLoading = true
      const SCEoption = {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['科研项目','科研经费'],
          left: 'center',
          bottom: 10,
        },
        xAxis:{
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: [{
          type: 'value',
          name: '数量（个）',
          nameLocation:'end',
          position: 'left',
          axisLine: {
            show: true,
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 10,
              color: "#333333"
            }
          }
        },{
          type: 'value',
          name: '经费（万元）',
          position: 'right',
          nameLocation:'end',
          axisLine: {
            show: true,
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            show : true,
            textStyle: {
              fontSize: 10,
              color: "#333333"
            }
          }
        }],
        series: [{
          name: '科研项目',
          type: 'bar',
          yAxisIndex: "0",
          data: [],
          barWidth: 20,
          itemStyle: {
            normal: {
              color: '#A39EF0'
            },
          }
        },{
          name: '科研经费',
          yAxisIndex: "1",
          type: 'bar',
          barGap: "30%",
          data: [],
          barWidth: 20,
          itemStyle: {
            normal: {
              color: '#F69192'
            },
          }
        }]
      }
      ApiprojectFunds(this.options).then(res=>{
        const {statistical,total } = res.data
        this.total = total
        let xAxisData = [],
            data1 = [],
            data2 = []
        for (const key in statistical) {
          xAxisData.push(key)
          const {count,funds} = statistical[key]
          data1.push(count)
          data2.push(funds)
        }
        SCEoption.xAxis.data = xAxisData
        SCEoption.series[0].data = data1
        SCEoption.series[1].data = data2
        // this.$refs.yearrange.start_time = xAxisData[0]
        // this.$refs.yearrange.end_time = xAxisData[xAxisData.length-1]
      }).finally(()=>{
        this.contentLoading = false
        const chart = echarts.init(this.$refs.SCEchart)
        chart.setOption(SCEoption)
        if(flag){
          window.onresize = throttle(function(){
            chart.resize()
          },50)
        }
        
      })
    },
    onChange(obj){
      this.options = obj
      this.getInfo()
    }
  }
}
</script>

<style lang='less' scoped>
.statistical{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header_cell{
  background: white;
  height: 80px;
  border-radius: 8px;
  padding: 8px 24px;
  display: flex;
  box-sizing: border-box;
  .block_white--num{
    font-size: 26px;
    font-weight: bold;
    color: #666666;
    margin-right: 8px;
  }
  .block_white--unit{
    font-size: 14px;
    color: #888888;
    margin-bottom: 4px;
  }
  .block_white--footer{
    font-size: 16px;
    color: #666666;
  }
}
.content{
  background: white;
}
.SCEchart{
  width: 80%;
  height: 80%;
  min-width: 650px;
  min-height: 350px;
}
</style>